<template>
    <div >
        <div style="padding-left: 15px; padding-right: 15px; padding-top: 15px; display: flex;justify-content: space-between;align-items: center;">
            <div style="display: flex;align-items: center;" v-if="isd">
                <div style="background-color: #d9d9d9;border-radius: 50%; width: 35px;height: 35px;">
                    <img :src="user.headimgUrl ? user.headimgUrl : '../static/img/Telegram.png'"
                        style="width: 35px;height: 35px; border-radius: 50%; " />
                </div>
                <!-- users?users.user.first_name :  -->
                <!-- user.userName -->
                <div style="margin-left: 10px; font-size: 14px;color: #fff;"> {{ user.userName }}</div>
            </div>
            <div v-else style="font-size: 24px;color: #fff;font-weight: bold;">
                Leaderboard
            </div>
            <div style="width: 30%; display: flex;justify-content: space-between;">
                <div @click="yindao" class="center"
                    style="border: 1px solid #C1E3FF33; width: 41px;height: 41px;border-radius: 10px;">
                    <img style="width: 24px;height: 24px;" src="../static/img/message-question-circle.png" />
                </div>
                <div @click="walletOpenHandel" class="center"
                    style="border: 1px solid #C1E3FF33; width: 41px;height: 41px;border-radius: 10px;">
                    <img style="width: 24px;height: 24px;" src="../static/img/wallet-02.png" />
                </div>
            </div>
        </div>
    <div v-if="drawer" style="bottom: 0;height: 70%; width: 100%; background: rgb(27, 32, 37);border-top-right-radius: 20px;border-top-left-radius: 20px;position: fixed;z-index: 1000;">
        <div style="padding: 25px;">
            <div style="display: flex;justify-content: space-between;height: 40px;">
                <label style="font-size: 26px;color: #fff;">Connect Wallet</label>
                <el-icon color="#fff" @click="drawer = false"><CloseBold /></el-icon>
            </div>
            <div style="color: #BDBDBD; font-size: 13px;">Choose your wallet to receive airdrop</div>
            <div style="margin-top: 50px;"></div>
            <div @click="save(item)" v-for="item in list" :key="item.id" style="background: #546C7F33; display: flex;align-items: center;padding: 5px 15px; border-radius: 5px; line-height: 50px;margin-bottom: 10px;">
                <img :src="item.logUrl" style="width: 35px;height: 35px;border-radius: 50%; margin-right: 10px;">
                <div style="color: #fff;font-size: 20px;">{{ item.name }}</div>
            </div>
        </div>
    </div>
    <div  v-if="drawersss" style="bottom: 30%; width: 100%; background: rgb(27, 32, 37);border-top-right-radius: 20px;border-top-left-radius: 20px;position: fixed;z-index: 1000;">
        <div style="padding: 25px; color: #fff;">
            <div style="display: flex;justify-content: space-between; align-items: center;">
                <label style="font-size: 26px;">Deposit Wallet</label>
                <el-icon color="#fff" @click="drawersss = false"><CloseBold /></el-icon>
            </div>
            <div  style="color: #fff;font-size: 14px;margin-bottom: 20px;margin-top: 20px;line-height: 25px;"> Enter your Base chain wallet address to receive $DAWG airdrop </div>

            <div>
                <div >
                    <input style="background-color:rgba(255, 255, 255, 0.16);width: 97%;"  v-model="postContent" />
                </div>
                <div class="sbumit_bnt" size="default" type="default" hover-class="is-hover" @click="signInHandel">Connect wallet</div>
            </div>
        </div>
    </div>
        <div v-if="conner" style="bottom: 0;height: 70%; width: 100%; background: rgb(27, 32, 37);border-top-right-radius: 20px;border-top-left-radius: 20px;position: fixed;z-index: 1000;">
            <div style="padding: 25px;">
                <div style="display: flex;justify-content: space-between;height: 40px;">
                    <label style="font-size: 26px;color: #fff;">Connect Wallet</label>
                    <el-icon color="#fff" @click="conner = false"><CloseBold /></el-icon>
                </div>
                <div style="color: #BDBDBD; font-size: 13px;">Choose your wallet to receive airdrop</div>
                <div style="margin-top: 50px;"></div>
                <div  style="background: #546C7F33; display: flex;align-items: center;padding: 10px 15px; border-radius: 5px; margin-bottom: 10px;">
                    <img :src="logUrl" style="width: 35px;height: 35px;border-radius: 50%; margin-right: 10px;">
                    <div style="width: 70%;">
                        <div style="color: #fff;font-size: 13px;">{{ walletname }}</div>
                        <div style="color: #fff; margin-top: 5px;  font-size: 15px;font-family: 'Inter'; font-weight: 600;">{{ ellipseText(wallet) }}</div>
                    </div>
                    <div style="text-align: right; width: 15%;">
                        <img style="width: 24px;height: 24px;" src="../static/img/wallet-02.png"/>
                    </div>
                </div>
                <div class="sbumit_bnt" size="default" type="default" hover-class="is-hover" @click="Reconnect">Reconnect wallet</div>

            </div>
        </div>
       
    </div>
</template>

<script>
import Api from '../api/api'
import { ElMessage } from 'element-plus'
export default {
    props: {
        user: {
            type: [Object , String],
            default:() => {}
        },
        isd: {
            type: Boolean,
            default: true
        },
        params: {
            type: [Object, String],
            default: () => { }
        },
    },
    data() {
        return {
            drawer: false,
            postContent: '',
            isFalse: true,
            list: [],
            drawersss: false,
            ids:'',
            users: {},
            conner: false,
            walletname: '',
            wallet: '',
            logUrl: '',
            tys:false
        }
    },
    mounted() {
        Api.get('/walletcategory/list').then(res => {
            if (res.code == 200) {
                console.log('钱包',res.data)
                this.list = res.data
            }
        })
    },
    methods: {
        // 重置钱包
        Reconnect() {
            this.conner = false
            this.tys = true
            this.drawersss = true
           
        },
        ellipseText(val) {
            // console.log(val)
            if (!val) return "";
            //截取前六位、后四位，在进行拼接
            return val.slice(0, 6) + "******" + val.slice(-4);
        },
        save(item) {
            console.log('sadad',item)
            this.drawer = false
            this.ids = item.id
            this.walletname = item.name
            this.logUrl = item.logUrl
            
            Api.get('walletinfo/getList',{ walletCategoryId: item.id }).then(res => {
                if (res.code == 200) {
                    if (res.data.length > 0) {
                        this.conner = true;
                        this.drawer = false
                        this.wallet = res.data[0].walletUrl
                        return
                    }
                   this.drawersss = true
               }
           })
        },
        walletOpenHandel() {
            this.drawer = true
            this.$emit('walletOpenHandel',122)
            console.log('---------')
            let user = localStorage.getItem('userInfo')
            this.postContent = user.walletUrl
            if (user.walletUrl) this.isFalse = false
            
        },
        signInHandel() {
            if (!this.isFalse) return
            if(this.postContent == '' || this.postContent == null) return ElMessage({ message: 'Please enter', type: 'error' })
            if (this.tys) {
                 Api.post('walletinfo/update', { id: Number(this.ids), walletCategoryId: Number(this.ids), walletUrl: this.postContent }).then(res => {
                    if (res.code == 200) {
                        this.tys = false
                        this.drawersss = false
                    }
                 })
                return 
            }
            Api.post('walletinfo', { walletUrl: this.postContent, walletCategoryId: this.ids }).then(res => {
                if (res.code == 200) {
                    this.drawersss = false
                    ElMessage({ message: 'Submit successfully', type: 'success' })
                    this.getUserInfo()
                }
            })
        },
        getUserInfo() {
            Api.get('/userinfo').then(res => {
                if (res.code == 200) {
                    console.log('dadad', res.data)
                    localStorage.setItem('userInfo', JSON.stringify(res.data))
                }
            })
        },
        yindao() {
            this.$router.push('/guide')
        }
    }
}
</script>

<style lang="scss" scoped>
input{
    border: none;
    height: 30px;
    line-height: 30px;
    color: #fff;
    background-color:rgba(255, 255, 255, 0.16);
    padding: 5px;
    border-radius: 5px;
    width: 96%;
}
 .sbumit_bnt{
    width: 100%;
    color: #000;
    background-color:  #f6cb23;
    border-color: #f6cb23;
    margin-bottom: 30px;
    margin-top: 30px;
    font-family: 'Inter';
    font-size: 17px;
    font-weight: 600;
    height: 50px;
    text-align: center;
    border-radius: 10px;
    line-height: 50px;

}
</style>